<!DOCTYPE html>



  


<html class="theme-next pisces use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo, NexT">










<meta name="description" content="CSS编码技巧尽量减少代码重复 line-height写倍数 font-size写百分比  当某些值相互依赖时，应该把它们的相互关系用代码表达出来。 比如line-height写倍数、font-size写百分比更利于维护。 123font-size:20px;height:20px;line-heigth:20px; 换成 123font-size: 150%;height:20px;line-h">
<meta property="og:type" content="article">
<meta property="og:title" content="CSS之进阶总结">
<meta property="og:url" content="http://yoursite.com/2020/12/07/CSS之进阶总结/index.html">
<meta property="og:site_name" content="春风自是人间客">
<meta property="og:description" content="CSS编码技巧尽量减少代码重复 line-height写倍数 font-size写百分比  当某些值相互依赖时，应该把它们的相互关系用代码表达出来。 比如line-height写倍数、font-size写百分比更利于维护。 123font-size:20px;height:20px;line-heigth:20px; 换成 123font-size: 150%;height:20px;line-h">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://wx3.sinaimg.cn/large/0069qZtTgy1gizk2ty7otj304304aa9x.jpg">
<meta property="og:image" content="https://wx4.sinaimg.cn/mw1024/0069qZtTgy1gizka5updnj3042044746.jpg">
<meta property="og:image" content="https://wx1.sinaimg.cn/mw1024/0069qZtTgy1gizkad0s9lj304k04aweg.jpg">
<meta property="og:image" content="https://wx3.sinaimg.cn/mw690/0069qZtTgy1gj0f2jukxkj308v05pt8r.jpg">
<meta property="og:image" content="https://wx1.sinaimg.cn/mw690/0069qZtTgy1gj0f30zb6bj308t05nn04.jpg">
<meta property="og:image" content="https://wx3.sinaimg.cn/mw690/0069qZtTgy1gj0nvzcynqj308y069dfn.jpg">
<meta property="og:image" content="https://wx4.sinaimg.cn/mw690/0069qZtTgy1gizlk17h0ej303b03i74d.jpg">
<meta property="og:image" content="https://wx2.sinaimg.cn/mw690/0069qZtTgy1gj0f2emiabj308x05lq2r.jpg">
<meta property="og:image" content="https://wx3.sinaimg.cn/mw690/0069qZtTgy1gj0f2jukxkj308v05pt8r.jpg">
<meta property="og:image" content="https://wx1.sinaimg.cn/mw690/0069qZtTgy1gj0f30zb6bj308t05nn04.jpg">
<meta property="og:image" content="https://wx3.sinaimg.cn/mw690/0069qZtTgy1gj0m36t5cij306q068web.jpg">
<meta property="og:image" content="https://wx2.sinaimg.cn/mw690/0069qZtTgy1gj0mzj9rt8j307o041t8i.jpg">
<meta property="og:image" content="https://wx3.sinaimg.cn/mw690/0069qZtTgy1gj0ob24z97j306y03qmwy.jpg">
<meta property="og:image" content="https://wx2.sinaimg.cn/mw690/0069qZtTgy1gj0ob7xfq6j307d03sjr7.jpg">
<meta property="og:image" content="https://wx4.sinaimg.cn/mw690/0069qZtTgy1gj0ojj9giyj305602i3yg.jpg">
<meta property="og:image" content="https://wx4.sinaimg.cn/mw690/0069qZtTgy1gj0ol4gog9j305l03amx2.jpg">
<meta property="og:image" content="https://www.hangge.com/blog_uploads/201711/2017112015003436986.png">
<meta property="og:image" content="https://wx2.sinaimg.cn/large/0069qZtTgy1gij2iyzdf5j31hb0twu0x.jpg">
<meta property="og:image" content="https://wx2.sinaimg.cn/mw690/0069qZtTgy1gj589b1p14j30aa08z75k.jpg">
<meta property="og:image" content="https://wx3.sinaimg.cn/mw690/0069qZtTgy1gj589e73jxj308i0bl3yn.jpg">
<meta property="og:image" content="https://user-images.githubusercontent.com/8554143/43560900-2ef72358-9647-11e8-8123-ecfc45828c3d.gif">
<meta property="og:updated_time" content="2020-12-08T13:25:25.754Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="CSS之进阶总结">
<meta name="twitter:description" content="CSS编码技巧尽量减少代码重复 line-height写倍数 font-size写百分比  当某些值相互依赖时，应该把它们的相互关系用代码表达出来。 比如line-height写倍数、font-size写百分比更利于维护。 123font-size:20px;height:20px;line-heigth:20px; 换成 123font-size: 150%;height:20px;line-h">
<meta name="twitter:image" content="https://wx3.sinaimg.cn/large/0069qZtTgy1gizk2ty7otj304304aa9x.jpg">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: "",
      labels: ""
    }
  };
</script>



  <link rel="canonical" href="http://yoursite.com/2020/12/07/CSS之进阶总结/">





  <title>CSS之进阶总结 | 春风自是人间客</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">春风自是人间客</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <h1 class="site-subtitle" itemprop="description">是非成败转头空，青山依旧在，几度夕阳红。</h1>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories" rel="section">
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-program">
          <a href="/categories/program" rel="section">
            
            程序
          </a>
        </li>
      
        
        <li class="menu-item menu-item-reading">
          <a href="/categories/reading" rel="section">
            
            阅读
          </a>
        </li>
      
        
        <li class="menu-item menu-item-idea">
          <a href="/categories/idea" rel="section">
            
            想法
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about" rel="section">
            
            关于我
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/12/07/CSS之进阶总结/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="彭丹丹">
      <meta itemprop="description" content>
      <meta itemprop="image" content="https://upload.jianshu.io/users/upload_avatars/830956/debe5156eed7?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="春风自是人间客">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">CSS之进阶总结</h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-12-07T14:19:32+08:00">
                2020-12-07
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/program/" itemprop="url" rel="index">
                    <span itemprop="name">program</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  4,062
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  19
                </span>
              
            </div>
          

          
          
        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <h1 id="CSS编码技巧"><a href="#CSS编码技巧" class="headerlink" title="CSS编码技巧"></a>CSS编码技巧</h1><h2 id="尽量减少代码重复"><a href="#尽量减少代码重复" class="headerlink" title="尽量减少代码重复"></a>尽量减少代码重复</h2><ul>
<li><code>line-height</code>写倍数</li>
<li><code>font-size</code>写百分比</li>
</ul>
<p>当某些值相互依赖时，应该把它们的相互关系用代码表达出来。</p>
<p>比如<code>line-height</code>写倍数、<code>font-size</code>写百分比更利于维护。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">font-size:20px;</span><br><span class="line">height:20px;</span><br><span class="line">line-heigth:20px;</span><br></pre></td></tr></table></figure>
<p>换成</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">font-size: 150%;</span><br><span class="line">height:20px;</span><br><span class="line">line-heigth:1.5;</span><br></pre></td></tr></table></figure>
<h2 id="代码易维护vs．代码量少"><a href="#代码易维护vs．代码量少" class="headerlink" title="代码易维护vs．代码量少"></a>代码易维护vs．代码量少</h2><p>比如：我们不需要左边框</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">border-width: 1px 1px 1px 0;</span><br><span class="line">border-color: #fff;</span><br><span class="line">border-style: solid;</span><br></pre></td></tr></table></figure>
<p>但下次要把<code>1px</code>改为<code>2px</code>的话要改3次，可以直接优化成：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">border-width: 1px;</span><br><span class="line">border-left-width: 0;</span><br><span class="line">border-color: #fff;</span><br><span class="line">border-style: solid;</span><br></pre></td></tr></table></figure>
<h2 id="currentColor"><a href="#currentColor" class="headerlink" title="currentColor"></a>currentColor</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">p&#123;</span><br><span class="line">  color: red;</span><br><span class="line">  border: solid 1px currentColor;</span><br><span class="line">  // 或直接简化</span><br><span class="line">  border: solid 1px;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>p标签的边框会直接获取到color的颜色。</p>
<h2 id="合理使用简写"><a href="#合理使用简写" class="headerlink" title="合理使用简写"></a>合理使用简写</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">background: red;</span><br><span class="line">background-color: red;</span><br></pre></td></tr></table></figure>
<p>这2者的差距在后者如果在添加<code>background-image</code>之类的属性就会导致不一样的效果。</p>
<hr>
<h1 id="文档分析注释"><a href="#文档分析注释" class="headerlink" title="文档分析注释"></a>文档分析注释</h1><h2 id="目录"><a href="#目录" class="headerlink" title="目录"></a>目录</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">/*--*\</span><br><span class="line">引入的CSS目录</span><br><span class="line">\*--*/</span><br><span class="line">/**</span><br><span class="line"> * css/base.css--------------引入cssReset</span><br><span class="line"> * font-family-config.css----引入配置字体的css</span><br><span class="line"> * public.css----------------引入全局公用的css</span><br><span class="line"> */</span><br><span class="line">import &apos;./assets/css/base.css&apos;;</span><br><span class="line">import &apos;./config/font-family-config.css&apos;;</span><br><span class="line">import &apos;./assets/css/public.css&apos;;</span><br></pre></td></tr></table></figure>
<h2 id="具体CSS文件的注释"><a href="#具体CSS文件的注释" class="headerlink" title="具体CSS文件的注释"></a>具体CSS文件的注释</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">/*-------*\</span><br><span class="line">  $主框架</span><br><span class="line">\*-------*/</span><br><span class="line">.page&#123;&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">/*-------*\</span><br><span class="line"> $标题菜单</span><br><span class="line">\*-------*/</span><br><span class="line">.title&#123;&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">/*------------*\</span><br><span class="line"> $滚动栏样式重置</span><br><span class="line">\*------------*/</span><br><span class="line"></span><br><span class="line">::-webkit-scrollbar&#123;&#125;</span><br></pre></td></tr></table></figure>
<p>中间最后留5行以后，好在全览时看起来像个段落。</p>
<h1 id="代码顺序"><a href="#代码顺序" class="headerlink" title="代码顺序"></a>代码顺序</h1><ol>
<li>Reset；</li>
<li>DOM元素，如ul、li；</li>
<li>对象和抽象内容；</li>
<li>子元素</li>
<li>修补异常</li>
</ol>
<h1 id="命名规范"><a href="#命名规范" class="headerlink" title="命名规范"></a>命名规范</h1><p>下划线（ <code>__</code> ）代表子元素；<br>连字符（ <code>-</code> ）代表不同状态；</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.ul&#123;&#125;</span><br><span class="line">.ul_li&#123;&#125;</span><br><span class="line">.ul_li-display&#123;&#125;</span><br></pre></td></tr></table></figure>
<h1 id="BEM-命名"><a href="#BEM-命名" class="headerlink" title="BEM 命名"></a>BEM 命名</h1><p>块（Block）、元素（Element）、修饰符（Modifier）<br>例：<code>class=&quot;button button--state-danger&quot;</code></p>
<hr>
<h1 id="CSS其它基础知识"><a href="#CSS其它基础知识" class="headerlink" title="CSS其它基础知识"></a>CSS其它基础知识</h1><h1 id="优先级及优化"><a href="#优先级及优化" class="headerlink" title="优先级及优化"></a>优先级及优化</h1><h2 id="优先级"><a href="#优先级" class="headerlink" title="优先级"></a>优先级</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">!important</span><br><span class="line">内联</span><br><span class="line">Id</span><br><span class="line">Class</span><br><span class="line">标签</span><br><span class="line">越清楚优先级越高</span><br></pre></td></tr></table></figure>
<h2 id="优化"><a href="#优化" class="headerlink" title="优化"></a>优化</h2><p>尽量不要使用<code>!important</code>，下次会使用更多的<code>!important</code>去覆盖它。</p>
<h1 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h1><p>文字相关：font-family、color、font-size、font-style等。<br>列表相关：list-style、list-style-type、list-style-position等。<br>表格相关：border-spacing。</p>
<p><strong>比如border不能继承是因为不通用，有的得加上，有的加上得删掉。</strong></p>
<hr>
<h1 id="CSS特殊值：initial、inherit、unset"><a href="#CSS特殊值：initial、inherit、unset" class="headerlink" title="CSS特殊值：initial、inherit、unset"></a>CSS特殊值：initial、inherit、unset</h1><h2 id="初始值：initial"><a href="#初始值：initial" class="headerlink" title="初始值：initial"></a>初始值：initial</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">html,body&#123;</span><br><span class="line">  color: red;</span><br><span class="line">&#125;</span><br><span class="line">p&#123;</span><br><span class="line">  color: green;</span><br><span class="line">&#125;</span><br><span class="line">.main p&#123;</span><br><span class="line">  color: initial;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>设置了<code>color:initial</code>值的<code>&lt;p&gt;</code>的颜色既不是<code>red</code>也不是<code>green</code>，而是<code>黑色</code>。</p>
<h2 id="继承：inherit"><a href="#继承：inherit" class="headerlink" title="继承：inherit"></a>继承：inherit</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">html,body&#123;</span><br><span class="line">  color: red;</span><br><span class="line">&#125;</span><br><span class="line">p&#123;</span><br><span class="line">  color: green;</span><br><span class="line">&#125;</span><br><span class="line">.main p&#123;</span><br><span class="line">  color: inherit;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>设置了<code>color:inherit</code>值的<code>&lt;p&gt;</code>的颜色继承了<code>html,body</code>是<code>red</code>。</p>
<h2 id="复原：unset"><a href="#复原：unset" class="headerlink" title="复原：unset"></a>复原：unset</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">html,body&#123;</span><br><span class="line">  color: red;</span><br><span class="line">&#125;</span><br><span class="line">p&#123;</span><br><span class="line">  color: green;</span><br><span class="line">&#125;</span><br><span class="line">.main p&#123;</span><br><span class="line">  color: unset;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>设置了<code>color:unset</code>值的<code>&lt;p&gt;</code>的颜色忽略了原来的<code>green</code>，读取了<code>html,body</code>的值<code>red</code>。</p>
<h1 id="简写属性"><a href="#简写属性" class="headerlink" title="简写属性"></a>简写属性</h1><p><strong>4个值：上右下左(时钟)；2个值：右/左和上下（x轴和y轴）；</strong></p>
<h2 id="4个值"><a href="#4个值" class="headerlink" title="4个值"></a>4个值</h2><p>如：<code>margin</code>、<code>padding</code>、<code>border-width</code>。</p>
<p>当<code>margin</code>和<code>padding</code>简写为<code>2</code>个值时，代表的是<code>上/下</code>和<code>左/右</code>。</p>
<h2 id="2个值"><a href="#2个值" class="headerlink" title="2个值"></a>2个值</h2><p>如：<code>text-shodow</code>、<code>background-position</code>.</p>
<h1 id="em和rem"><a href="#em和rem" class="headerlink" title="em和rem"></a>em和rem</h1><h2 id="em"><a href="#em" class="headerlink" title="em"></a>em</h2><p><code>em</code>是相当于<code>html,body</code>里面的<code>font-size</code>的<code>倍数</code></p>
<p>如：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">html,body&#123;</span><br><span class="line">	font-size: 20px;</span><br><span class="line">&#125;</span><br><span class="line">p&#123;</span><br><span class="line">	font-size: 2em;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>此时<code>&lt;p&gt;</code>标签的<code>font-size</code>就是<code>40px</code>；<br>但是如果<code>&lt;p&gt;</code>标签里面还包含了一个<code>&lt;p&gt;</code>标签，如：<code>&lt;p&gt;&lt;p&gt;no!&lt;/p&gt;I&#39;m not going.&lt;/p&gt;</code>，此时最里面的<code>&lt;p&gt;</code>标签的<code>font-size</code>就是<code>60px</code>;</p>
<h2 id="rem"><a href="#rem" class="headerlink" title="rem"></a>rem</h2><p><code>rem</code>是计算出不同尺寸的相对值</p>
<p>例如不同的移动端设备的长高大小是不一样的值。</p>
<p><a href="https://firefly1984982452.github.io/2018/03/09/%E6%A0%B9%E6%8D%AE%E8%AE%BE%E8%AE%A1%E5%9B%BE%E9%80%82%E9%85%8Drem/" target="_blank" rel="noopener">更多</a></p>
<h2 id="应用"><a href="#应用" class="headerlink" title="应用"></a>应用</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.main&#123;</span><br><span class="line">  font-size: 2rem;</span><br><span class="line">&#125;</span><br><span class="line">.main p&#123;</span><br><span class="line">  font-size: .5em;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>p标签的大小都是父元素的一半。</p>
<h1 id="视口的相对单位"><a href="#视口的相对单位" class="headerlink" title="视口的相对单位"></a>视口的相对单位</h1><p>vm：1/100的视口宽度；<br>vh：1/100的视口高度；<br>vmax：1/100的视口中较大的一方的长度；<br>vmin：1/100的视口中较小的一方的长度；</p>
<h1 id="css变量"><a href="#css变量" class="headerlink" title="css变量"></a>css变量</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">:root&#123;</span><br><span class="line">  --main-color: #fbb;</span><br><span class="line">&#125;</span><br><span class="line">p&#123;</span><br><span class="line">  color: var(--main-color);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<hr>
<h1 id="CSS3部分"><a href="#CSS3部分" class="headerlink" title="CSS3部分"></a>CSS3部分</h1><h1 id="背景与边框"><a href="#背景与边框" class="headerlink" title="背景与边框"></a>背景与边框</h1><h2 id="半透明边框"><a href="#半透明边框" class="headerlink" title="半透明边框"></a>半透明边框</h2><p><code>rgba</code>或<code>hsla</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">color: hsla(1,0%,100%,.2);</span><br><span class="line">border: solid 3px;</span><br><span class="line">border-color: rgba(255,255,0,.2);</span><br></pre></td></tr></table></figure>
<h2 id="多重边框"><a href="#多重边框" class="headerlink" title="多重边框"></a>多重边框</h2><h3 id="用box-shadow"><a href="#用box-shadow" class="headerlink" title="用box-shadow"></a>用box-shadow</h3><p><img src="https://wx3.sinaimg.cn/large/0069qZtTgy1gizk2ty7otj304304aa9x.jpg" alt="image"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">background: #fbfb;</span><br><span class="line">box-shadow: 0 0 0 5px #f00, 0 0 0 10px #ff0, 0 0 0 15px #00f;</span><br></pre></td></tr></table></figure>
<h3 id="用outline"><a href="#用outline" class="headerlink" title="用outline"></a>用outline</h3><p><img src="https://wx4.sinaimg.cn/mw1024/0069qZtTgy1gizka5updnj3042044746.jpg" alt="image"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">background: #fbfb;</span><br><span class="line">outline: 5px solid #ff0;</span><br><span class="line">border: 5px solid #f00;</span><br></pre></td></tr></table></figure>
<p><strong>outline和border的区别</strong>：</p>
<ul>
<li>outline不占空间，border占空间</li>
<li>设置圆角（border-radius）之后，border边框会贴紧，outline不会</li>
<li>outline-set可以设置边距</li>
</ul>
<p><strong>区别的图片</strong><br><img src="https://wx1.sinaimg.cn/mw1024/0069qZtTgy1gizkad0s9lj304k04aweg.jpg" alt="image"></p>
<p><strong>区别的代码</strong>:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">background: #fbfb;</span><br><span class="line">outline: 5px solid #ff0;</span><br><span class="line">border: 5px solid #f00;</span><br><span class="line">border-radius: 50%;</span><br><span class="line">outline-offset: 10px;</span><br></pre></td></tr></table></figure>
<h1 id="background-origin"><a href="#background-origin" class="headerlink" title="background-origin"></a>background-origin</h1><p>背景区域的位置，有如下属性：</p>
<ul>
<li><p><code>content-box</code>：padding值会起效，以padding开始的单位开始显示背景；</p>
</li>
<li><p><code>padding-box</code>：padding不会影响背影，直接从border里面开如显示背影；</p>
</li>
<li><p><code>border-box</code>：border不会影响背景，直接把border的内容也算在背影里面，背景会减去border的长度。</p>
</li>
</ul>
<h1 id="background-image"><a href="#background-image" class="headerlink" title="background-image"></a>background-image</h1><p>背景图，有如下属性：</p>
<ul>
<li><p><code>url()</code>：图片地址</p>
</li>
<li><p><code>line-gradient</code>：创建线性渐变的图片</p>
</li>
<li><p><code>redial-gradient</code>：创建径向渐变的图片</p>
</li>
<li><p><code>repeating-line-gradient</code>：创建重复线性渐变的图片</p>
</li>
<li><p><code>repeating-redial-gradient</code>：创建重复径向渐变的图片</p>
</li>
</ul>
<p>与<code>background-size</code>组合的话，可以生成条纹背景。</p>
<h2 id="line-gradient"><a href="#line-gradient" class="headerlink" title="line-gradient"></a>line-gradient</h2><p>背景2色平铺</p>
<p><img src="https://wx3.sinaimg.cn/mw690/0069qZtTgy1gj0f2jukxkj308v05pt8r.jpg" alt="image"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">background: linear-gradient(#ff0 50%, #f00 50%);</span><br><span class="line">background-size: 100% 50%;</span><br></pre></td></tr></table></figure>
<h2 id="repeating-line-gradient"><a href="#repeating-line-gradient" class="headerlink" title="repeating-line-gradient"></a>repeating-line-gradient</h2><p>背景2色任意角度平铺</p>
<p><img src="https://wx1.sinaimg.cn/mw690/0069qZtTgy1gj0f30zb6bj308t05nn04.jpg" alt="image"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">background-image: repeating-linear-gradient(60deg,yellow 0%,yellow 5%,green 0%,green 10%);</span><br></pre></td></tr></table></figure>
<h1 id="box-shadow"><a href="#box-shadow" class="headerlink" title="box-shadow"></a>box-shadow</h1><p>例：</p>
<p><code>box-shadow: 50px 50px 0 20px #ffb;</code></p>
<p>图：</p>
<p><img src="https://wx3.sinaimg.cn/mw690/0069qZtTgy1gj0nvzcynqj308y069dfn.jpg" alt="image"></p>
<p>解析：</p>
<p>参数1：X轴，图中为30，因为50-20=30；<br>参数2：Y轴，图中为30，因为50-20=30；<br>参数3：模糊距离<br>参数4：阴影大小，默认可省略不写时为0。<br>参数4：颜色。</p>
<h1 id="background"><a href="#background" class="headerlink" title="background"></a>background</h1><p>让背景图在距离右边和底部都是20px，如图：</p>
<p><img src="https://wx4.sinaimg.cn/mw690/0069qZtTgy1gizlk17h0ej303b03i74d.jpg" alt="image"></p>
<h2 id="background-position"><a href="#background-position" class="headerlink" title="background-position"></a>background-position</h2><p>方法一：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">background: url(img_url) no-repeat;</span><br><span class="line">background-position: bottom 20px right 20px;</span><br></pre></td></tr></table></figure></p>
<p>方法二：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">padding: 20px;</span><br><span class="line">background: url(img_url) no-repeat;</span><br><span class="line">background-position: bottom right;</span><br><span class="line">background-origin: content-box;</span><br></pre></td></tr></table></figure></p>
<p><code>background-origin:content-box;</code>和<code>padding:20px</code>结合起来的效果和方法一一样。</p>
<h2 id="calc"><a href="#calc" class="headerlink" title="calc"></a>calc</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">background: url(img_url) no-repeat;</span><br><span class="line">background-position: calc(100% - 20px, 100% - 20px);</span><br></pre></td></tr></table></figure>
<h1 id="linear-gradient：条纹背景"><a href="#linear-gradient：条纹背景" class="headerlink" title="linear-gradient：条纹背景"></a>linear-gradient：条纹背景</h1><h2 id="背景为上下2色分割"><a href="#背景为上下2色分割" class="headerlink" title="背景为上下2色分割"></a>背景为上下2色分割</h2><p><img src="https://wx2.sinaimg.cn/mw690/0069qZtTgy1gj0f2emiabj308x05lq2r.jpg" alt="image"></p>
<p><code>backgorund-image: linear-gradient(#ff0 50%, #f00 50%)</code></p>
<h2 id="背景2色平铺"><a href="#背景2色平铺" class="headerlink" title="背景2色平铺"></a>背景2色平铺</h2><p><img src="https://wx3.sinaimg.cn/mw690/0069qZtTgy1gj0f2jukxkj308v05pt8r.jpg" alt="image"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">background: linear-gradient(#ff0 50%, #f00 50%);</span><br><span class="line">background-size: 100% 50%;</span><br></pre></td></tr></table></figure>
<h2 id="背景2色任意角度平铺"><a href="#背景2色任意角度平铺" class="headerlink" title="背景2色任意角度平铺"></a>背景2色任意角度平铺</h2><p><img src="https://wx1.sinaimg.cn/mw690/0069qZtTgy1gj0f30zb6bj308t05nn04.jpg" alt="image"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">background-image: repeating-linear-gradient(60deg,yellow 0%,yellow 5%,green 0%,green 10%);</span><br></pre></td></tr></table></figure>
<h1 id="linear-gradient：切角效果"><a href="#linear-gradient：切角效果" class="headerlink" title="linear-gradient：切角效果"></a>linear-gradient：切角效果</h1><p><img src="https://wx3.sinaimg.cn/mw690/0069qZtTgy1gj0m36t5cij306q068web.jpg" alt="image"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">width: 200px;</span><br><span class="line">height: 200px;</span><br><span class="line">background:#ffb;</span><br><span class="line">background: linear-gradient(135deg, transparent 15px,#fbb 0) top left,</span><br><span class="line">      linear-gradient(-135deg, transparent 15px,#fbb 0) top right,</span><br><span class="line">      linear-gradient(-45deg, transparent 15px, #fbb 0) bottom right,</span><br><span class="line">      linear-gradient(45deg, transparent 15px, #fbb 0) bottom left;</span><br><span class="line">background-size:50% 50%;</span><br><span class="line">background-repeat:no-repeat;</span><br></pre></td></tr></table></figure>
<h1 id="transform：平形四边形"><a href="#transform：平形四边形" class="headerlink" title="transform：平形四边形"></a>transform：平形四边形</h1><p><code>transform: skewX(-45deg);</code></p>
<p><strong>skewX默认会把字体内容也旋转，解决方式是加伪元素</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">.box&#123;</span><br><span class="line">  position: relative;</span><br><span class="line">  width: 100px;</span><br><span class="line">  height: 50px;</span><br><span class="line">  text-align: center;</span><br><span class="line">  line-height: 50px;</span><br><span class="line">&#125;</span><br><span class="line">.box::before&#123;</span><br><span class="line">  content: &apos;&apos;;</span><br><span class="line">  position: absolute;</span><br><span class="line">  bottom: 0;</span><br><span class="line">  top: 0;</span><br><span class="line">  right: 0;</span><br><span class="line">  left: 0;</span><br><span class="line">  z-index: -1;</span><br><span class="line">  background-color: #ffb;</span><br><span class="line">  transform: skewX(-45deg);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="rotate菱形图片"><a href="#rotate菱形图片" class="headerlink" title="rotate菱形图片"></a>rotate菱形图片</h1><h2 id="正方形"><a href="#正方形" class="headerlink" title="正方形"></a>正方形</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">.lin&#123;</span><br><span class="line">  width: 200px;</span><br><span class="line">  height: 200px;</span><br><span class="line">  overflow: hidden;</span><br><span class="line">  transform: rotate(45deg);</span><br><span class="line">&#125;</span><br><span class="line">.lin &gt; img&#123;</span><br><span class="line">  width: 100%;</span><br><span class="line">  height: 100%;</span><br><span class="line">  transform: rotate(-45deg)scale(1.5);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>如果不用<code>scale(1.5)</code>的话就是八角形</strong>。</p>
<h2 id="长方形"><a href="#长方形" class="headerlink" title="长方形"></a>长方形</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">.lin-long &gt; img&#123;</span><br><span class="line">  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);</span><br><span class="line">  transition: ls clip-path;</span><br><span class="line">&#125;</span><br><span class="line">.lin-long &gt; img:hover&#123;</span><br><span class="line">  clip-path: polygon(0 0 , 100% 0, 100% 100%, 0 100%);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="transform"><a href="#transform" class="headerlink" title="transform"></a>transform</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">/* 转换中心 */</span><br><span class="line">transform-origin: top;</span><br><span class="line">/* 旋转 */</span><br><span class="line">transform: rotate(45deg); </span><br><span class="line">/* 平移 */</span><br><span class="line">transform: translate(20px, 10px);</span><br><span class="line">/* 缩放 */</span><br><span class="line">transform: scale(.5);</span><br><span class="line">/* 倾斜 */</span><br><span class="line">transform: skew(45deg);</span><br></pre></td></tr></table></figure>
<p>也可以所有属性合并：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">transform: rotate(45deg) translate(20px, 10px) scale(.5) skew(45deg);</span><br></pre></td></tr></table></figure>
<h1 id="transform-perspective：梯形效果"><a href="#transform-perspective：梯形效果" class="headerlink" title="transform: perspective：梯形效果"></a><code>transform: perspective</code>：梯形效果</h1><p><img src="https://wx2.sinaimg.cn/mw690/0069qZtTgy1gj0mzj9rt8j307o041t8i.jpg" alt="image"></p>
<p><code>transform: perspective(30px)rotateX(5deg);</code></p>
<p>同样会导致内容变成梯形，所以用伪元素生成</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">.border&#123;</span><br><span class="line">  width: 200px;</span><br><span class="line">  height: 100px;</span><br><span class="line">  position: relative;</span><br><span class="line">&#125;</span><br><span class="line">.border::before&#123;</span><br><span class="line">  content: &apos;&apos;;</span><br><span class="line">  position: absolute;</span><br><span class="line">  bottom: 0;</span><br><span class="line">  top: 0;</span><br><span class="line">  left: 0;</span><br><span class="line">  right: 0;</span><br><span class="line">  z-index: -1;</span><br><span class="line">  background:#fbb;</span><br><span class="line">  transform: perspective(30px)rotateX(5deg);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="阴影"><a href="#阴影" class="headerlink" title="阴影"></a>阴影</h1><h2 id="边框阴影：box-shadow"><a href="#边框阴影：box-shadow" class="headerlink" title="边框阴影：box-shadow"></a>边框阴影：box-shadow</h2><h3 id="单侧阴影"><a href="#单侧阴影" class="headerlink" title="单侧阴影"></a>单侧阴影</h3><p><img src="https://wx3.sinaimg.cn/mw690/0069qZtTgy1gj0ob24z97j306y03qmwy.jpg" alt="image"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">box-shadow: 15px 0 5px -10px #000;</span><br></pre></td></tr></table></figure>
<h3 id="多侧阴影"><a href="#多侧阴影" class="headerlink" title="多侧阴影"></a>多侧阴影</h3><p><img src="https://wx2.sinaimg.cn/mw690/0069qZtTgy1gj0ob7xfq6j307d03sjr7.jpg" alt="image"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">box-shadow: 15px 0 5px -10px #000, -15px 0 5px -10px #000;</span><br></pre></td></tr></table></figure>
<h2 id="文字阴影：text-shadow"><a href="#文字阴影：text-shadow" class="headerlink" title="文字阴影：text-shadow"></a>文字阴影：text-shadow</h2><p><img src="https://wx4.sinaimg.cn/mw690/0069qZtTgy1gj0ojj9giyj305602i3yg.jpg" alt="image"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">text-shadow: 5px 5px 5px #f00;</span><br></pre></td></tr></table></figure>
<p>参数：x轴、y轴、阴影、颜色。</p>
<h2 id="多边形阴影：drop-shadow"><a href="#多边形阴影：drop-shadow" class="headerlink" title="多边形阴影：drop-shadow"></a>多边形阴影：drop-shadow</h2><p><strong>文字也会有阴影</strong></p>
<p><img src="https://wx4.sinaimg.cn/mw690/0069qZtTgy1gj0ol4gog9j305l03amx2.jpg" alt="image"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">width: 0;</span><br><span class="line">height: 0;</span><br><span class="line">border: 100px solid ;</span><br><span class="line">border-color: transparent transparent red;</span><br><span class="line">filter: drop-shadow(5px 5px 5px #000);</span><br></pre></td></tr></table></figure>
<p>参数：x轴、y轴、阴影、颜色。</p>
<h2 id="通过阴影弱化背景"><a href="#通过阴影弱化背景" class="headerlink" title="通过阴影弱化背景"></a>通过阴影弱化背景</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);</span><br></pre></td></tr></table></figure>
<p>重点：用伪元素设置blur</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">.cover&#123;</span><br><span class="line">  width: 600px;</span><br><span class="line">  height: 500px;</span><br><span class="line">  position: relative;</span><br><span class="line">&#125;</span><br><span class="line">.cover::before&#123;</span><br><span class="line">  content: &apos;&apos;;</span><br><span class="line">  position: absolute;</span><br><span class="line">  top: 0;</span><br><span class="line">  left: 0;</span><br><span class="line">  width: 600px;</span><br><span class="line">  height: 500px;</span><br><span class="line">  filter: blur(5px);</span><br><span class="line">  background: url(&apos;./floor.jpeg&apos;) center center no-repeat;</span><br><span class="line">  z-index: -1;</span><br><span class="line">&#125;</span><br><span class="line">.content&#123;</span><br><span class="line">  position: absolute;</span><br><span class="line">  left: 30%;</span><br><span class="line">  top: 50%;</span><br><span class="line">  width: 300px;</span><br><span class="line">  height: 100px;</span><br><span class="line">  border: 1px solid #fbb;</span><br><span class="line">&#125;</span><br><span class="line">&lt;div class=&quot;cover&quot;&gt;</span><br><span class="line">  &lt;div class=&quot;content&quot;&gt;我是内容&lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<hr>
<h1 id="CSS基础"><a href="#CSS基础" class="headerlink" title="CSS基础"></a>CSS基础</h1><h1 id="滚动提示"><a href="#滚动提示" class="headerlink" title="滚动提示"></a>滚动提示</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">background-image: radial-gradient(at top, rgba(0,0,0,0.2), rgba(0,0,0,0));</span><br><span class="line">background-repeat: no-repeat;</span><br><span class="line">background-size: 100% 15px;</span><br><span class="line">background-attachment: local, scroll;</span><br></pre></td></tr></table></figure>
<h1 id="width自适应关键字"><a href="#width自适应关键字" class="headerlink" title="width自适应关键字"></a>width自适应关键字</h1><ul>
<li><code>fill-available</code>：撑满空间，100%</li>
<li><code>fit-content</code>：内容最大宽度。文字超过会换行。</li>
<li><code>max-content</code>：内容最大宽度。如果文字超过显示区域了也不会换行，所以会有200%的可能。</li>
<li><code>min-content</code>：内容最小宽度。比如图片是200px，文字是300px，就取200px。</li>
</ul>
<h1 id="table表格控制列宽"><a href="#table表格控制列宽" class="headerlink" title="table表格控制列宽"></a>table表格控制列宽</h1><p><code>table-layout: fixed;</code></p>
<p>通常都是根据内容多少自动计算宽度的。</p>
<h1 id="满屏背景和固定宽度"><a href="#满屏背景和固定宽度" class="headerlink" title="满屏背景和固定宽度"></a>满屏背景和固定宽度</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">main&#123;</span><br><span class="line">  width: 1000px; // 可不写</span><br><span class="line">  margin:0 calc(50% - 500px;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="紧贴底部的页脚"><a href="#紧贴底部的页脚" class="headerlink" title="紧贴底部的页脚"></a>紧贴底部的页脚</h1><h2 id="方法1：中间内容用calc"><a href="#方法1：中间内容用calc" class="headerlink" title="方法1：中间内容用calc"></a>方法1：中间内容用calc</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">header&#123;</span><br><span class="line">  height: 100px;</span><br><span class="line">  background-color: #bbf;</span><br><span class="line">&#125;</span><br><span class="line">.main&#123;</span><br><span class="line">  background-color: #fbb;</span><br><span class="line">  min-height: calc(100% - 200px);</span><br><span class="line">&#125;</span><br><span class="line">footer&#123;</span><br><span class="line">  height: 100px;</span><br><span class="line">  background-color: #bfb;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="方法2：用flex"><a href="#方法2：用flex" class="headerlink" title="方法2：用flex"></a>方法2：用flex</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">body&#123;</span><br><span class="line">  display: flex;</span><br><span class="line">  flex-direction: column;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="打字动画"><a href="#打字动画" class="headerlink" title="打字动画"></a>打字动画</h1><p>用<code>width:0</code>到<code>width:100%</code>模拟出打字效果。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">@keyframes typing &#123;</span><br><span class="line">  from &#123;</span><br><span class="line">    width: 0;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">p&#123;</span><br><span class="line">  width: 100%;</span><br><span class="line">  overflow: hidden;</span><br><span class="line">  white-space: nowrap;</span><br><span class="line">  animation: typing 18s;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="pointer-events实现鼠标穿透效果"><a href="#pointer-events实现鼠标穿透效果" class="headerlink" title="pointer-events实现鼠标穿透效果"></a><code>pointer-events</code>实现鼠标穿透效果</h1><p>简单例子：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">  &lt;head&gt;</span><br><span class="line">    &lt;meta charset=&quot;utf-8&quot;&gt;</span><br><span class="line">    &lt;title&gt;&lt;/title&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">      .top &#123;</span><br><span class="line">          width: 100px;</span><br><span class="line">          height: 90px;</span><br><span class="line">          position: absolute;</span><br><span class="line">          top: 0;</span><br><span class="line">          left: 65px;</span><br><span class="line">          background: yellow;</span><br><span class="line">          opacity: 0.5;</span><br><span class="line">          pointer-events: none;</span><br><span class="line">      &#125;</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">  &lt;/head&gt;</span><br><span class="line">  &lt;body&gt;</span><br><span class="line">    &lt;!-- 下方的链接 --&gt;</span><br><span class="line">    &lt;ul&gt;</span><br><span class="line">      &lt;li&gt;&lt;a href=&quot;http://www.hangge.com&quot;&gt;航歌&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">        &lt;li&gt;&lt;a href=&quot;http://www.hangge.com&quot;&gt;hangge.com&lt;/a&gt;&lt;/li&gt;</span><br><span class="line">    &lt;/ul&gt;</span><br><span class="line">    &lt;!-- 上方黄色div --&gt;</span><br><span class="line">    &lt;div class=&quot;top&quot;&gt;&lt;/div&gt;</span><br><span class="line">  &lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<p>效果：</p>
<p><img src="https://www.hangge.com/blog_uploads/201711/2017112015003436986.png" alt="image"></p>
<p>与地图交互的复杂效果：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;div class=&quot;page&quot;&gt;</span><br><span class="line">        &lt;map1 class=&quot;map&quot; /&gt;</span><br><span class="line">        &lt;home class=&quot;home-content&quot; /&gt;</span><br><span class="line">	&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;style lang=&quot;less&quot; scoped&gt;</span><br><span class="line">.page &#123;</span><br><span class="line">	width: 100%;</span><br><span class="line">	height: 100%;</span><br><span class="line">	position: relative;</span><br><span class="line">	.map&#123;</span><br><span class="line">		width:100%;</span><br><span class="line">		height:100%;</span><br><span class="line">		position: absolute;</span><br><span class="line">		top: 0;</span><br><span class="line">		bottom: 0;</span><br><span class="line">		left: 0;</span><br><span class="line">	&#125;</span><br><span class="line">	.home-content&#123;</span><br><span class="line">		position: absolute;</span><br><span class="line">		top: 0;</span><br><span class="line">		bottom: 0;</span><br><span class="line">		left: 0;</span><br><span class="line">        pointer-events: none;</span><br><span class="line">        .left,.right&#123;</span><br><span class="line">            pointer-events:all</span><br><span class="line">        &#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<p>重点：<code>map</code>放在底层，<code>home</code>的<code>总DOM</code>设置为<code>none</code>，然后哪些地方需要点击就设置为<code>all</code>。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.home&#123;</span><br><span class="line">    pointer-events: none;</span><br><span class="line">    .left,.right&#123;</span><br><span class="line">        pointer-events:all</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p><img src="https://wx2.sinaimg.cn/large/0069qZtTgy1gij2iyzdf5j31hb0twu0x.jpg" alt="image"></p>
<h1 id="line-height深入理解"><a href="#line-height深入理解" class="headerlink" title="line-height深入理解"></a>line-height深入理解</h1><p>行高的几种值：<code>px</code>、<code>normal</code>、<code>%</code>、<code>number</code>、<code>inherit</code></p>
<p>默认：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">line-height: 20px;</span><br><span class="line">line-height: normal;</span><br><span class="line">line-height: 150%;</span><br><span class="line">line-height: 1.5; // 资料上都是1，但chrome和firfox上应该都是1.5</span><br></pre></td></tr></table></figure>
<h1 id="display"><a href="#display" class="headerlink" title="display"></a>display</h1><h2 id="inline"><a href="#inline" class="headerlink" title="inline"></a>inline</h2><ul>
<li>不会独占一行</li>
<li>width和height无效</li>
<li>margin和padding中的left/right有效，top/bottom无效</li>
</ul>
<h2 id="block"><a href="#block" class="headerlink" title="block"></a>block</h2><ul>
<li>独占一行</li>
<li>width和height正常</li>
<li>marin和padding正常</li>
</ul>
<h2 id="inline-table"><a href="#inline-table" class="headerlink" title="inline-table"></a>inline-table</h2><p>行内表格</p>
<h3 id="table-cell"><a href="#table-cell" class="headerlink" title="table-cell"></a>table-cell</h3><p>所有内容在一行</p>
<h1 id="width和height"><a href="#width和height" class="headerlink" title="width和height"></a>width和height</h1><h2 id="table"><a href="#table" class="headerlink" title="table"></a>table</h2><p>Table表格中，定了width，如果其它的内容很高，内容少的可能会撑成一列高。</p>
<p><img src="https://wx2.sinaimg.cn/mw690/0069qZtTgy1gj589b1p14j30aa08z75k.jpg" alt="image"></p>
<h2 id="不适合用width-100-的情况"><a href="#不适合用width-100-的情况" class="headerlink" title="不适合用width:100%的情况"></a>不适合用width:100%的情况</h2><p><img src="https://wx3.sinaimg.cn/mw690/0069qZtTgy1gj589e73jxj308i0bl3yn.jpg" alt="image"></p>
<p>子元素<code>width:100%</code>会获取父元素长度，如果设置了<code>width:100%</code>反而适得其反。</p>
<h2 id="按钮内文字会自动换行"><a href="#按钮内文字会自动换行" class="headerlink" title="按钮内文字会自动换行"></a>按钮内文字会自动换行</h2><h2 id="box-sizing"><a href="#box-sizing" class="headerlink" title="box-sizing"></a>box-sizing</h2><ul>
<li>content-box：默认值</li>
<li>border-box：将border变成里面消化的值</li>
</ul>
<h2 id="内联元素"><a href="#内联元素" class="headerlink" title="内联元素"></a>内联元素</h2><ul>
<li><p><code>display: inline-block;</code>会控制当前元素以自己的内容为长度，不受父元素影响。</p>
</li>
<li><p>内联元素如果<code>display</code>改为了<code>block</code>，不用再设置<code>width:100%</code>。</p>
</li>
</ul>
<h2 id="让元素heigth支持100-的方法"><a href="#让元素heigth支持100-的方法" class="headerlink" title="让元素heigth支持100%的方法"></a>让元素heigth支持100%的方法</h2><p>方法一：</p>
<p><code>html,body{heigth:100%}</code></p>
<p>方法二：</p>
<p>使用绝对定位</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">height: 100%;</span><br><span class="line">position: absolute;</span><br></pre></td></tr></table></figure>
<h2 id="max-width-min-width和max-height-min-height"><a href="#max-width-min-width和max-height-min-height" class="headerlink" title="max-width/min-width和max-height/min-height"></a>max-width/min-width和max-height/min-height</h2><p><strong>超越!important</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;img src=&quot;./floor.jpeg&quot; style=&quot;width: 300px!important;&quot; /&gt;</span><br><span class="line">img&#123;min-width: 400px;&#125;</span><br></pre></td></tr></table></figure>
<p>最终生效的是<code>400px</code>。</p>
<p><strong>min-width覆盖max-width</strong></p>
<p>如果<code>min-width</code>和<code>max-width</code>冲突时，取<code>min-width</code>的值。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">min-width: 400px;</span><br><span class="line">max-width: 350px;</span><br></pre></td></tr></table></figure>
<h1 id="root选择器"><a href="#root选择器" class="headerlink" title=":root选择器"></a><code>:root</code>选择器</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">:root&#123;</span><br><span class="line">  color: red;</span><br><span class="line">&#125;</span><br><span class="line">html&#123;</span><br><span class="line">  color: green;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>最后出来的颜色是<code>red</code>，<code>:root</code>选择器代表是根元素，代表<code>html</code>，但优先级比<code>html</code>高。</p>
<h1 id="文字渐变"><a href="#文字渐变" class="headerlink" title="文字渐变"></a>文字渐变</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">background: linear-gradient(to bottom, #8AF0FF,#3780E6);;</span><br><span class="line">-webkit-background-clip: text;</span><br><span class="line">color: transparent;</span><br></pre></td></tr></table></figure>
<h1 id="单行居中显示文字，多行居左显示，最多两行超过用省略号结尾"><a href="#单行居中显示文字，多行居左显示，最多两行超过用省略号结尾" class="headerlink" title="单行居中显示文字，多行居左显示，最多两行超过用省略号结尾"></a>单行居中显示文字，多行居左显示，最多两行超过用省略号结尾</h1><p>前2项条件：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;h2&gt;&lt;p&gt;咽喉痛无发热&lt;/p&gt;&lt;/h2&gt;</span><br><span class="line">&lt;h2&gt;&lt;p&gt;上呼吸道感染，咽喉痛无发热&lt;/p&gt;&lt;/h2&gt;</span><br><span class="line">&lt;h2&gt;&lt;p&gt;老人主诉头晕多日，饭后胸闷，结合体检情况，考虑为交感神经。&lt;/p&gt;&lt;/h2&gt;</span><br><span class="line"></span><br><span class="line">...</span><br><span class="line"></span><br><span class="line">h2&#123;</span><br><span class="line">  text-align: center;</span><br><span class="line">&#125;</span><br><span class="line">p&#123;</span><br><span class="line">  text-align: left;</span><br><span class="line">  display: inline-block;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>第3项条件关键代码</p>
<p>display: -webkit-box; // 设置display，将对象作为弹性伸缩盒子模型显示<br>-webkit-line-clamp: 2; // 限制在一个块元素显示的文本的行数<br>-webkit-box-orient: vertical; // 规定框的子元素应该被水平或垂直排列</p>
<p>配合 overflow : hidden 和 text-overflow: ellipsis 即可实现 webkit 内核下的多行省略</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">p &#123;</span><br><span class="line">    display: inline-block;</span><br><span class="line">    text-align: left;</span><br><span class="line">    overflow : hidden;</span><br><span class="line">    text-overflow: ellipsis;</span><br><span class="line">    display: -webkit-box;</span><br><span class="line">    -webkit-line-clamp: 2;</span><br><span class="line">    -webkit-box-orient: vertical;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">h2&#123;</span><br><span class="line">    text-align: center;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>但是单行也会居左，而不是居中，所以要同样再嵌套一层。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;h2&gt;&lt;p&gt;&lt;em&gt;单行居中，多行居左&lt;em&gt;&lt;/p&gt;&lt;/h2&gt;</span><br></pre></td></tr></table></figure>
<h1 id="reset-css"><a href="#reset-css" class="headerlink" title="reset.css"></a>reset.css</h1><p>作者推荐了<code>normalize.css</code>替代传统的<code>reset.css</code>。<br><a href="https://github.com/chokcoco/iCSS/issues/5" target="_blank" rel="noopener">链接</a></p>
<h1 id="抗锯齿渲染-webkit-font-smoothing"><a href="#抗锯齿渲染-webkit-font-smoothing" class="headerlink" title="抗锯齿渲染-webkit-font-smoothing"></a>抗锯齿渲染<code>-webkit-font-smoothing</code></h1><p><code>-webkit-font-smoothing</code>有3个属性值：</p>
<ul>
<li><code>none</code>: 对像素低的文本好，会有严重的锯齿；</li>
<li><code>subpixel-antialiased</code>: 默认值，有轻微锯齿；</li>
<li><code>antialiased</code>: 抗锯齿很好。</li>
</ul>
<p>抗锯齿：<code>body{-webkit-font-smoothing: antialiased;}</code></p>
<p><code>Gecko</code>内核的抗锯齿效果：</p>
<p><code>-moz-osx-font-smoothing: inherit | grayscale;</code>这个属性也是更清晰的作用。</p>
<h1 id="粘性布局：position-sticky"><a href="#粘性布局：position-sticky" class="headerlink" title="粘性布局：position:sticky"></a>粘性布局：<code>position:sticky</code></h1><p>重点：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">position: sticky;</span><br><span class="line">top: 0;</span><br></pre></td></tr></table></figure>
<p>sticky必须指定 <code>top</code>, <code>right</code>, <code>bottom</code> 或 <code>left</code> 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。</p>
<h2 id="懒加载图片实例"><a href="#懒加载图片实例" class="headerlink" title="懒加载图片实例"></a>懒加载图片实例</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">const io = new IntersectionObserver(callback);</span><br><span class="line">let imgs = document.querySelectorAll(&apos;[data-src]&apos;);</span><br><span class="line">function callback(entries)&#123;</span><br><span class="line">  entries.forEach((item) =&gt; &#123;</span><br><span class="line">    if(item.isIntersecting)&#123;</span><br><span class="line">      item.target.src = item.target.dataset.src </span><br><span class="line">      io.unobserve(item.target)	</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">  &#125;)</span><br><span class="line">&#125; </span><br><span class="line"></span><br><span class="line">imgs.forEach((item)=&gt;&#123;</span><br><span class="line">  io.observe(item)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h1 id="文字描边-webkit-text-stroke"><a href="#文字描边-webkit-text-stroke" class="headerlink" title="文字描边-webkit-text-stroke"></a>文字描边-webkit-text-stroke</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">-webkit-text-stroke: 1px #fff;</span><br></pre></td></tr></table></figure>
<h1 id="文字颜色-webkit-text-fill-color"><a href="#文字颜色-webkit-text-fill-color" class="headerlink" title="文字颜色-webkit-text-fill-color"></a>文字颜色-webkit-text-fill-color</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">a&#123;</span><br><span class="line">  -webkit-text-fill-color: red;</span><br><span class="line">  color: green;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>它们俩同样都是设置文字颜色，但就算<code>color</code>在下面，也是<code>-webkit-text-fill-color</code>的权重更高，优先级更高。</p>
<h1 id="focus与-focus-within"><a href="#focus与-focus-within" class="headerlink" title=":focus与:focus-within"></a><code>:focus</code>与<code>:focus-within</code></h1><p>如果只使用<code>:focus</code>，它不能包含子元素的聚焦事件（比如输入框、按钮聚焦）。</p>
<p>以下内容无效：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.container:focus input &#123;</span><br><span class="line">  width: 230px;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>用:focus-within解决：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">.container:focus-within input &#123;</span><br><span class="line">  width: 230px;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>当父元素聚焦时，<code>input</code>内容也会随之改变。</p>
<h2 id="例子：不同的登录状态"><a href="#例子：不同的登录状态" class="headerlink" title="例子：不同的登录状态"></a>例子：不同的登录状态</h2><p><img src="https://user-images.githubusercontent.com/8554143/43560900-2ef72358-9647-11e8-8123-ecfc45828c3d.gif" alt="image"></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">img&#123;</span><br><span class="line">  display: none;</span><br><span class="line">  position: fixed;</span><br><span class="line">  top: 0;</span><br><span class="line">  left: 0;</span><br><span class="line">&#125;</span><br><span class="line">.g-container&#123;</span><br><span class="line">  margin: 200px 0 0 0;</span><br><span class="line">&#125;</span><br><span class="line">.g-username:focus-within img&#123;</span><br><span class="line">  display: block;</span><br><span class="line">&#125;</span><br><span class="line">.g-password:focus-within img&#123;</span><br><span class="line">  display: block;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">...</span><br><span class="line"></span><br><span class="line">&lt;div class=&quot;g-container&quot;&gt;</span><br><span class="line">    &lt;h2&gt;登录&lt;/h2&gt;</span><br><span class="line">    &lt;div class=&quot;g-username&quot;&gt;</span><br><span class="line">        &lt;input name=&quot;loginPhoneOrEmail&quot; maxlength=&quot;64&quot; placeholder=&quot;请输入手机号或邮箱&quot; class=&quot;input&quot;&gt;</span><br><span class="line">        &lt;img src=&quot;https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png&quot; class=&quot;g-username&quot;&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;div class=&quot;g-password&quot;&gt;</span><br><span class="line">        &lt;input name=&quot;loginPassword&quot; type=&quot;password&quot; maxlength=&quot;64&quot; placeholder=&quot;请输入密码&quot; class=&quot;input&quot;&gt;</span><br><span class="line">        &lt;img src=&quot;https://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png&quot; class=&quot;g-password&quot;&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<h1 id="font-size-10px"><a href="#font-size-10px" class="headerlink" title="font-size:10px"></a>font-size:10px</h1><p>字体如果需求是小于<code>12px</code>的话，可以先设置字体为<code>20px</code>，再使用<code>transfrom:scale(0.5)</code>进行缩放。（也可以使用图片，但不推荐）</p>
<h1 id="清除浮动"><a href="#清除浮动" class="headerlink" title="清除浮动"></a>清除浮动</h1><p>1、使用空元素clear:both<br>2、overflow:hidden<br>3、使用邻近元素clear:both<br>4、使用伪类:before元素clear:both</p>
<p>父元素：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">.content-box::after&#123;</span><br><span class="line">  clear: both;</span><br><span class="line">  content: &apos;&apos;;</span><br><span class="line">  display: block;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="左边定宽，右边自适应"><a href="#左边定宽，右边自适应" class="headerlink" title="左边定宽，右边自适应"></a>左边定宽，右边自适应</h1><p>1、使用flex<br>2、右边的width: calc(100% - 100px)<br>3、使用float</p>
<h1 id="BFC"><a href="#BFC" class="headerlink" title="BFC"></a>BFC</h1><p>BFC是特性（功能），不是定义。</p>
<p>比如float，position、absolute</p>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2020/12/07/JavaScript之进阶总结/" rel="next" title="JavaScript之进阶总结">
                <i class="fa fa-chevron-left"></i> JavaScript之进阶总结
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2020/12/07/CSS之常用方法总结/" rel="prev" title="CSS之常用方法总结">
                CSS之常用方法总结 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
      <div id="lv-container" data-id="city" data-uid="MTAyMC8zODk2OC8xNTQ5Ng=="></div>
    </div>

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image" src="https://upload.jianshu.io/users/upload_avatars/830956/debe5156eed7?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240" alt="彭丹丹">
            
              <p class="site-author-name" itemprop="name">彭丹丹</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives">
              
                  <span class="site-state-item-count">183</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">3</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            

          </nav>

          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#CSS编码技巧"><span class="nav-number">1.</span> <span class="nav-text">CSS编码技巧</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#尽量减少代码重复"><span class="nav-number">1.1.</span> <span class="nav-text">尽量减少代码重复</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#代码易维护vs．代码量少"><span class="nav-number">1.2.</span> <span class="nav-text">代码易维护vs．代码量少</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#currentColor"><span class="nav-number">1.3.</span> <span class="nav-text">currentColor</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#合理使用简写"><span class="nav-number">1.4.</span> <span class="nav-text">合理使用简写</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#文档分析注释"><span class="nav-number">2.</span> <span class="nav-text">文档分析注释</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#目录"><span class="nav-number">2.1.</span> <span class="nav-text">目录</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#具体CSS文件的注释"><span class="nav-number">2.2.</span> <span class="nav-text">具体CSS文件的注释</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#代码顺序"><span class="nav-number">3.</span> <span class="nav-text">代码顺序</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#命名规范"><span class="nav-number">4.</span> <span class="nav-text">命名规范</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#BEM-命名"><span class="nav-number">5.</span> <span class="nav-text">BEM 命名</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#CSS其它基础知识"><span class="nav-number">6.</span> <span class="nav-text">CSS其它基础知识</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#优先级及优化"><span class="nav-number">7.</span> <span class="nav-text">优先级及优化</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#优先级"><span class="nav-number">7.1.</span> <span class="nav-text">优先级</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#优化"><span class="nav-number">7.2.</span> <span class="nav-text">优化</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#继承"><span class="nav-number">8.</span> <span class="nav-text">继承</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#CSS特殊值：initial、inherit、unset"><span class="nav-number">9.</span> <span class="nav-text">CSS特殊值：initial、inherit、unset</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#初始值：initial"><span class="nav-number">9.1.</span> <span class="nav-text">初始值：initial</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#继承：inherit"><span class="nav-number">9.2.</span> <span class="nav-text">继承：inherit</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#复原：unset"><span class="nav-number">9.3.</span> <span class="nav-text">复原：unset</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#简写属性"><span class="nav-number">10.</span> <span class="nav-text">简写属性</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#4个值"><span class="nav-number">10.1.</span> <span class="nav-text">4个值</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2个值"><span class="nav-number">10.2.</span> <span class="nav-text">2个值</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#em和rem"><span class="nav-number">11.</span> <span class="nav-text">em和rem</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#em"><span class="nav-number">11.1.</span> <span class="nav-text">em</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#rem"><span class="nav-number">11.2.</span> <span class="nav-text">rem</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#应用"><span class="nav-number">11.3.</span> <span class="nav-text">应用</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#视口的相对单位"><span class="nav-number">12.</span> <span class="nav-text">视口的相对单位</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#css变量"><span class="nav-number">13.</span> <span class="nav-text">css变量</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#CSS3部分"><span class="nav-number">14.</span> <span class="nav-text">CSS3部分</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#背景与边框"><span class="nav-number">15.</span> <span class="nav-text">背景与边框</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#半透明边框"><span class="nav-number">15.1.</span> <span class="nav-text">半透明边框</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#多重边框"><span class="nav-number">15.2.</span> <span class="nav-text">多重边框</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#用box-shadow"><span class="nav-number">15.2.1.</span> <span class="nav-text">用box-shadow</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#用outline"><span class="nav-number">15.2.2.</span> <span class="nav-text">用outline</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#background-origin"><span class="nav-number">16.</span> <span class="nav-text">background-origin</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#background-image"><span class="nav-number">17.</span> <span class="nav-text">background-image</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#line-gradient"><span class="nav-number">17.1.</span> <span class="nav-text">line-gradient</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#repeating-line-gradient"><span class="nav-number">17.2.</span> <span class="nav-text">repeating-line-gradient</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#box-shadow"><span class="nav-number">18.</span> <span class="nav-text">box-shadow</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#background"><span class="nav-number">19.</span> <span class="nav-text">background</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#background-position"><span class="nav-number">19.1.</span> <span class="nav-text">background-position</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#calc"><span class="nav-number">19.2.</span> <span class="nav-text">calc</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#linear-gradient：条纹背景"><span class="nav-number">20.</span> <span class="nav-text">linear-gradient：条纹背景</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#背景为上下2色分割"><span class="nav-number">20.1.</span> <span class="nav-text">背景为上下2色分割</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#背景2色平铺"><span class="nav-number">20.2.</span> <span class="nav-text">背景2色平铺</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#背景2色任意角度平铺"><span class="nav-number">20.3.</span> <span class="nav-text">背景2色任意角度平铺</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#linear-gradient：切角效果"><span class="nav-number">21.</span> <span class="nav-text">linear-gradient：切角效果</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#transform：平形四边形"><span class="nav-number">22.</span> <span class="nav-text">transform：平形四边形</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#rotate菱形图片"><span class="nav-number">23.</span> <span class="nav-text">rotate菱形图片</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#正方形"><span class="nav-number">23.1.</span> <span class="nav-text">正方形</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#长方形"><span class="nav-number">23.2.</span> <span class="nav-text">长方形</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#transform"><span class="nav-number">24.</span> <span class="nav-text">transform</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#transform-perspective：梯形效果"><span class="nav-number">25.</span> <span class="nav-text">transform: perspective：梯形效果</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#阴影"><span class="nav-number">26.</span> <span class="nav-text">阴影</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#边框阴影：box-shadow"><span class="nav-number">26.1.</span> <span class="nav-text">边框阴影：box-shadow</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#单侧阴影"><span class="nav-number">26.1.1.</span> <span class="nav-text">单侧阴影</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#多侧阴影"><span class="nav-number">26.1.2.</span> <span class="nav-text">多侧阴影</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#文字阴影：text-shadow"><span class="nav-number">26.2.</span> <span class="nav-text">文字阴影：text-shadow</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#多边形阴影：drop-shadow"><span class="nav-number">26.3.</span> <span class="nav-text">多边形阴影：drop-shadow</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#通过阴影弱化背景"><span class="nav-number">26.4.</span> <span class="nav-text">通过阴影弱化背景</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#CSS基础"><span class="nav-number">27.</span> <span class="nav-text">CSS基础</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#滚动提示"><span class="nav-number">28.</span> <span class="nav-text">滚动提示</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#width自适应关键字"><span class="nav-number">29.</span> <span class="nav-text">width自适应关键字</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#table表格控制列宽"><span class="nav-number">30.</span> <span class="nav-text">table表格控制列宽</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#满屏背景和固定宽度"><span class="nav-number">31.</span> <span class="nav-text">满屏背景和固定宽度</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#紧贴底部的页脚"><span class="nav-number">32.</span> <span class="nav-text">紧贴底部的页脚</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#方法1：中间内容用calc"><span class="nav-number">32.1.</span> <span class="nav-text">方法1：中间内容用calc</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#方法2：用flex"><span class="nav-number">33.</span> <span class="nav-text">方法2：用flex</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#打字动画"><span class="nav-number">34.</span> <span class="nav-text">打字动画</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#pointer-events实现鼠标穿透效果"><span class="nav-number">35.</span> <span class="nav-text">pointer-events实现鼠标穿透效果</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#line-height深入理解"><span class="nav-number">36.</span> <span class="nav-text">line-height深入理解</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#display"><span class="nav-number">37.</span> <span class="nav-text">display</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#inline"><span class="nav-number">37.1.</span> <span class="nav-text">inline</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#block"><span class="nav-number">37.2.</span> <span class="nav-text">block</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#inline-table"><span class="nav-number">37.3.</span> <span class="nav-text">inline-table</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#table-cell"><span class="nav-number">37.3.1.</span> <span class="nav-text">table-cell</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#width和height"><span class="nav-number">38.</span> <span class="nav-text">width和height</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#table"><span class="nav-number">38.1.</span> <span class="nav-text">table</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#不适合用width-100-的情况"><span class="nav-number">38.2.</span> <span class="nav-text">不适合用width:100%的情况</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#按钮内文字会自动换行"><span class="nav-number">38.3.</span> <span class="nav-text">按钮内文字会自动换行</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#box-sizing"><span class="nav-number">38.4.</span> <span class="nav-text">box-sizing</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#内联元素"><span class="nav-number">38.5.</span> <span class="nav-text">内联元素</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#让元素heigth支持100-的方法"><span class="nav-number">38.6.</span> <span class="nav-text">让元素heigth支持100%的方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#max-width-min-width和max-height-min-height"><span class="nav-number">38.7.</span> <span class="nav-text">max-width/min-width和max-height/min-height</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#root选择器"><span class="nav-number">39.</span> <span class="nav-text">:root选择器</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#文字渐变"><span class="nav-number">40.</span> <span class="nav-text">文字渐变</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#单行居中显示文字，多行居左显示，最多两行超过用省略号结尾"><span class="nav-number">41.</span> <span class="nav-text">单行居中显示文字，多行居左显示，最多两行超过用省略号结尾</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#reset-css"><span class="nav-number">42.</span> <span class="nav-text">reset.css</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#抗锯齿渲染-webkit-font-smoothing"><span class="nav-number">43.</span> <span class="nav-text">抗锯齿渲染-webkit-font-smoothing</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#粘性布局：position-sticky"><span class="nav-number">44.</span> <span class="nav-text">粘性布局：position:sticky</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#懒加载图片实例"><span class="nav-number">44.1.</span> <span class="nav-text">懒加载图片实例</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#文字描边-webkit-text-stroke"><span class="nav-number">45.</span> <span class="nav-text">文字描边-webkit-text-stroke</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#文字颜色-webkit-text-fill-color"><span class="nav-number">46.</span> <span class="nav-text">文字颜色-webkit-text-fill-color</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#focus与-focus-within"><span class="nav-number">47.</span> <span class="nav-text">:focus与:focus-within</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#例子：不同的登录状态"><span class="nav-number">47.1.</span> <span class="nav-text">例子：不同的登录状态</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#font-size-10px"><span class="nav-number">48.</span> <span class="nav-text">font-size:10px</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#清除浮动"><span class="nav-number">49.</span> <span class="nav-text">清除浮动</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#左边定宽，右边自适应"><span class="nav-number">50.</span> <span class="nav-text">左边定宽，右边自适应</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#BFC"><span class="nav-number">51.</span> <span class="nav-text">BFC</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="copyright">&copy; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">彭丹丹</span>

  
</div>


	<div class="powered-by">
	<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
	  本站访客数:<span id="busuanzi_value_site_uv"></span>
	</span>
	</div>
  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Pisces</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  
    <script type="text/javascript">
      (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];
        if (typeof LivereTower === 'function') { return; }
        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;
        e.parentNode.insertBefore(j, e);
      })(document, 'script');
    </script>
  












  





  

  

  

  
  

  

  

  

  undefined
  
  <!-- 页面爆炸效果 -->
  
<script src="/live2dw/lib/L2Dwidget.min.js?0c58a1486de42ac6cc1c59c7d98ae887"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/tororo.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true}});</script></body>
</html>
